<template>
    <div class="middle">
        <el-row type="flex">
            <el-col :sm="12" class="left-side">
                <el-card class="box-card" >
                    <div class="left-title">
                        <div>公告列表</div>
                    </div>
                    <ul v-loading='leftLoading'>
                        <li @click="seeNotice(item.articleId)" v-for="item in leftList" :key="item.articleId">
                            <!-- <span class="note"></span> -->
                            <span class="intro" :title="item.title+(item.displayFlag == '1'?'（未读）':'')"><span class="title">{{item.title}}</span><span class="font"><font v-if="item.displayFlag == '1'" color="red">（未读）</font></span></span>
                            <span class="time">{{item.createTime | parseTime}}</span>
                        </li>
                    </ul>
                    <div class="left-footer"><el-button type="text" class="btn-success" @click="moreNotice">查看更多</el-button></div>
                </el-card>
            </el-col>
            <el-col :sm="12" class="right-side">
                <el-card class="box-card" >
                    <div class="right-title">
                        <div>资料下载</div>
                    </div>
                    <ul v-loading="rightLoading">
                        <li v-for="item in rightList" :key="item.articleId">
                            <!-- <span class="note"></span> -->
                            <span class="intro" :title="item.title+(item.displayFlag == '1'?'（未下载）':'')"><span class="title">{{item.title}}</span><span class="font"><font v-if="item.displayFlag == '1'" color="red">（未下载）</font></span></span>
                            <!-- <span class="time">{{item.createTime | parseTime}}</span> -->
                            <el-button type="text" class="btn-success download des-btn"  @click="download(item.fileUrl, item.articleId)">下载</el-button>
                        </li>
                    </ul>
                    <div class="left-footer"><el-button type="text" class="btn-success" @click="moreInfor">查看更多</el-button></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import { getLeftList, getRightList, seeDetailsByAgent } from 'api/bulletinBoard';
    import { mapGetters } from 'vuex';

    export default {
        data() {
            return {
                leftList: [],
                rightList: [],
                leftLoading: true,
                rightLoading: true
            };
        },
        created() {
            this.getLeftListFu();
            this.getRightListFu();
        },
        computed: {
            ...mapGetters([
                'uid'
            ])
        },
        methods: {
            // 经销商左侧列表查询
            getLeftListFu() {
                // let userId = '377409419043930112';
                getLeftList().then(res => {
                    this.leftLoading = false;
                    if (res.data.status == 200) {
                        this.leftList = res.data.content;
                    } else {
                        this.$message.error(res.data.errorMsg);
                    }
                }).catch(() => {
                    this.leftLoading = false;
                });
            },

            // 经销商右侧列表查询
            getRightListFu() {
                // let userId = '377409419043930112';
                getRightList().then(res => {
                    this.rightLoading = false;
                    if (res.data.status == 200) {
                        this.rightList = res.data.content;
                    } else {
                        this.$message.error(res.data.errorMsg);
                    }
                }).catch(() => {
                    this.rightLoading = false;
                });
            },

            // 公告列表
            moreNotice() {
                this.$router.push({ path: '/home/noticeList' });
            },

            // 资料下载列表
            moreInfor() {
                this.$router.push({ path: '/home/messageList' });
            },

            // 查看公告
            seeNotice(articleId) {
                this.$router.push({ path: `/home/newsDetail/1/${articleId}`});
            },

            // 下载
            download(fileUrl, articleId) {
                window.location.href = fileUrl;
                seeDetailsByAgent(articleId).then(res => {
                    if (res.data.status == 200) {
                        this.getRightListFu();
                    } else {
                        this.$message.error(res.data.errorMsg);
                    }
                })
            }
        }
    };

    
</script>

<style rel="stylesheet/scss" lang="scss">
  
    ul{
        list-style: none;
    }
    .middle{
        @mixin title {
            display:flex;
            justify-content: space-between;
            font-size:18px;
            color:#333;
            margin-bottom:16px;
        }
        @mixin ul-list {
            overflow: hidden;
            li{
                font-size:14px;
                color:#333;
                height: 52px;
                line-height: 52px;
                border-bottom: 1px solid #ddd;
                .note{
                    background: #8BC34A;
                    margin-right: 5px;
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    border: 1px solid #ddd;
                    border-radius: 50%;
                    margin-bottom: 15px;
                }
                .intro {
                    display: inline-block;
                    width: 50%;
                    height: 45px;
                    line-height: 45px;
                    .title {
                        display: inline-block;
                        max-width: 50%;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .font {
                        display: inline-block;
                        overflow: hidden;
                    }
                }
                .no-read {
                    color: #ff0000;
                }
                .time{
                    float: right;
                }
                .download{
                        float: right;
                        padding-top: 16px;
                }
            }
        }
        @mixin footer{
            overflow: hidden;
            margin-top: 20px;
            .btn-primary, .btn-success{
                float: right;
                padding-right: 0;
            }
            .des-btn{
                padding-right:12px;
            }
        }
        .left-side{
            padding: 7px;
            .left-title{
                @include title;
                @include footer;
                margin-top: 6px;
            }
            ul{
                height: 274px;
                @include ul-list;
                li{
                    cursor: pointer;
                }
            }
            .left-footer{
                overflow: hidden;
                @include footer;
            }
        }
        .right-side{
            padding: 7px;
            .right-title{
                @include title;
                @include footer;
                margin-top: 6px;
            }
            ul{
                height: 270px;
                @include ul-list;
                @include footer;
            }
            .left-footer{
                overflow: hidden;
                @include footer;
            }
        }
    }
    
</style>
